<template>
  <div class="addSpecialCon">
    <el-dialog :visible.sync="centerDialogVisible"
               :close-on-click-modal="clickModalHide"
               :before-close="closeDialog" width="700px"
               title="维保特况">
      <!-- <div style="text-align: center;font-size: 15px;margin-bottom: 6px;"><span style="font-weight: bold">维保特况</span>
      </div> -->
      <!-- <div class="link-he"></div> -->
      <el-form :inline="true" class="demo-form-inline" v-show="type == 'add'">
        <el-form-item label="" class="input_large">
          <el-input placeholder="工装编号" v-model="queryForm.gzCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search" icon="el-icon-search" @click="getGzDetailList"></el-button>
        </el-form-item>
      </el-form>
      <wh-table :tableData="tableData" :tableLoading="tableLoading" :filterPage="false" :tableHeader="tableHeader" :option="option"></wh-table>
      <div style="margin-top: 20px">
        <span style="line-height: 25px;font-size: 12px;">说明：</span>
        <el-input type="textarea" :rows="3" :disabled="type != 'add'" v-model="gzSpecialData.remark"></el-input>
      </div>
      <div v-show="type == 'edit'" style="margin-top: 20px">
        <label>提交人：</label><span>{{gzSpecialData.userName}}</span>
      </div>
      <div style="margin-top: 20px;text-align: center;" class="submit_btn" v-show="type == 'add'">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
      <div style="margin-top: 20px;text-align: center;" class="submit_btn" v-show="type == 'handle'">
        <el-button type="primary" @click="handleForm">处理</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";

  export default {
    name: 'editSpecialCon',
    props: ['dataDetail', 'type'],
    data() {
      return {
        tableLoading: true,
        centerDialogVisible: false,
        clickModalHide: false,
        count: 0,
        tableData: [],
        tableHeader: [],
        queryForm: {gzCode: ""},
        gzSpecialData: {
          id: "",
          gzId: "",
          remark: "",
          userName: "",
          spStatus: ""
        },
        option: {showOperate: false, headerCell: {background: 'rgb(108,198,236)', color: '#000000cc'}},
      }
    },

    components: {
      whTable
    },
    mounted() {
      this.setTableHeader();
    },

    methods: {
      getGzDetailList() {
        let self = this;
        self.tableLoading = true;
        self.gzSpecialData.gzId = "";
        self.$http({
          url: "/autoMonitor/gz/queryGongZhuangDetail",
          method: "post",
          data: JSON.stringify(self.queryForm),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if (resp.success) {
            self.tableData = resp.result;
            for (let data of self.tableData) {
              self.gzSpecialData.gzId = data.id;
            }
            self.tableLoading = false;
          }
        });
      },

      setTableHeader() {
        let self = this;
        self.tableHeader = [{"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "carType", "coloumNameCn": "车型"},
          {"columnName": "gzCode", "coloumNameCn": "工装编码"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "kuWeiCode", "coloumNameCn": "库位码"},
        ];
      },

      saveSpecialCondition() {
        let self = this;
        let param = {
          id: self.gzSpecialData.id,
          gzId: self.gzSpecialData.gzId,
          remark: self.gzSpecialData.remark,
          userName: self.gzSpecialData.userName
        };
        if (self.count == 0) {
          self.$http({
            url: "/autoMonitor/specialCondition/addSpecialCondition",
            method: "post",
            params: param,
          }).then(resp => {
            if (resp.success) {
              self.closeDialog();
              self.$eventBus.$emit("updateSpecialCondition");
            }
            self.$notify({
              title: '提示',
              message:resp.message? resp.message:"添加成功",
              type: resp.message?'error':'success'
            });
            this.count--;
          });
          this.count++;
        }
      },

      submitForm() {
        let self = this;
        if (!self.gzSpecialData.gzId || !self.gzSpecialData.remark) {
          self.$notify({
            title: '提示',
            message: "工装或备注不能为空！",
            type: 'error'
          });
          return;
        }
        self.saveSpecialCondition();
      },

      handleForm(){
        let self = this;
        let param = {
          id: self.gzSpecialData.id,
          spStatus:"1"
        };
        if (self.count == 0) {
          self.$http({
            url: "/autoMonitor/specialCondition/updateSpecialCondition",
            method: "post",
            params: param,
          }).then(resp => {
            if (resp.success) {
              self.closeDialog();
              self.$eventBus.$emit("updateSpecialCondition");
            }
            self.$notify({
              title: '提示',
              message:resp.success? "处理成功":"处理失败",
              type: resp.success?'success':'error'
            });
            this.count--;
          });
          this.count++;
        }
      },

      //关闭弹窗
      closeDialog() {
        this.centerDialogVisible = false;
      },


    },
    watch: {
      dataDetail(val) {
        let self = this;
        self.gzSpecialData = val;
        self.tableLoading = true;
        self.queryForm.gzCode = "";
        self.count = 0;
        self.centerDialogVisible = true;
        let tableData = [];
        if (val.gzId) {
          tableData.push(val);
        }
        self.$nextTick(() => {
          self.tableData = tableData;
          self.tableLoading = false;
        })
      }
    }
  }
</script>
<style  scoped>
  .link-he {
    width: 100%;
    height: 1px;
    border-top: solid #d7d8da 1px;
    margin-bottom: 15px;
  }
  .addSpecialCon .el-table--medium td, .addSpecialCon .el-table--medium th {
    padding: 0px 0;
  }
  .addSpecialCon .el-dialog__body {
    padding: 20px 20px;
  }
  .addSpecialCon .field-class {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border-color: #efefef5e
  }
  .addSpecialCon ul {
    list-style-type: none;
    margin: 8px 0 4px 0;
  }
  .addSpecialCon li {
    margin-top: 4px;
  }
  .addSpecialCon .el-radio--medium.is-bordered {
    padding: 5px 6px 0px 3px;
    border-radius: 3px;
    height: 26px;
  }
  .addSpecialCon .el-form--inline .el-form-item {
    margin-right: 0px;
  }
  .addSpecialCon .el-form-item__label {
    font-size: 13px;
    padding: 0px 8px 0 0;
  }
  .addSpecialCon .el-form-item__content {
    font-size: 11px;
  }
  .addSpecialCon .el-input--medium {
    font-size: 11px;
  }
  .addSpecialCon .el-input--medium .el-input__inner {
    height: 25px;
    line-height: 25px;
  }
  .addSpecialCon .el-form-item {
    margin-bottom: 2px;
  }
  .addSpecialCon .el-radio, .el-radio--medium.is-bordered .el-radio__label {
    font-size: 12px;
  }
  .addSpecialCon .el-form-item--medium .el-form-item__content, .addSpecialCon .el-form-item--medium .el-form-item__label {
    line-height: 30px;
  }
  .addSpecialCon .el-dialog {
    margin-top: 9vh !important;
  }
  .addSpecialCon .el-button--danger {
    padding: 6px 28px !important;
  }
  .addSpecialCon .search {
  	padding: 5px 9px !important;
  }
</style>
